<template>
  <div class="theme-config">
    <h2>{{ title }}</h2>
    <div class="theme-select">
      <h4>{{ small_title[0] }}</h4>
      <div class="config-box">
        <MixColorBlock title="黑暗森林" :mix_color="theme_dark" />
        <MixColorBlock title="童话粉" :mix_color="theme_pink" />
      </div>
    </div>
    <div class="theme-select">
      <h4>{{ small_title[1] }}</h4>
    </div>
  </div>
</template>

<script>
// import { ref } from 'vue'

import MixColorBlock from '@comps/ToSetting/MixColorBlock.vue'

// import { THEME_DARK, THEME_PINK } from '@/theme/static.js'

function getTitle() {
  const small_title = ['预设选择', '颜色选择']

  return {
    small_title
  }
}
function getMixColor() {
  const theme_dark = ['#2f3042', '#1e1d2b', '#222433']
  const theme_pink = ['#fff', 'rgba(239, 239, 244, 1)', 'rgba(255, 180, 190, 1)']
  //   function geThemeColor(takeValue, THEME_COLOR) {
  //     THEME_COLOR.forEach((item) => {
  //       if (takeValue.value.length >= 3) return
  //       takeValue.value.push(item)
  //     })
  //   }
  //   geThemeColor(theme_dark, THEME_DARK)
  //   geThemeColor(theme_pink, THEME_PINK)

  return {
    theme_dark,
    theme_pink
  }
}
export default {
  name: 'ThemeConfig',
  props: {
    title: {
      default: ''
    }
  },
  components: {
    MixColorBlock
  },
  setup() {
    return {
      ...getTitle(),
      ...getMixColor()
    }
  }
}
</script>

<style lang="scss" scoped>
.theme-config {
  color: $font;
  h2 {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 20px;
  }
  .theme-select {
    margin-top: 20px;
    h4 {
      margin-bottom: 16px;
      opacity: 0.8;
    }
    .config-box {
      display: flex;
      gap: 16px;
      align-items: center;
    }
  }
}
</style>
